<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    <meta charset="utf-8"/>
    <base href="http://mall.com/static/mall/order/">

    <script src="js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/JD2.css"/>

    <title></title>
</head>

<body>
<!--顶部-->
<header>
    <div class="header">
        <ul class="header-left">
            <li>
                <img src="img/header_1.png"/>
                <a href="">首页</a>
            </li>
        </ul>
        <ul class="header-right">
            <li>[[${session.loginUser.nickname}]]</li>
        </ul>
        <div style="clear: both;"></div>
    </div>
</header>

<!--logo图片-->
<div class="top-1">
    <img src="http://mall.com/static/assets/images/home1/logo.png" class="img1"/><span>结算页</span>
    <!--右侧绿色-->
    <img src="img/08.png" class="img2"/>
</div>
<!--主体部分-->
<p class="p1">填写并核对订单信息</p>
<div class="section">
    <!--收货人信息-->
    <div class="top-2">
        <span>收货人信息</span>
        <span>新增收货地址</span>
    </div>
    <!--地址-->
    <div class="top-3 addr-item" th:each="addr:${confirmOrderData.getMemberAddressDTOS}">
        <p th:attr="def=${addr.defaultStatus},addrId=${addr.id}">[[${addr.name}]]</p><span>[[${addr.name}]]  [[${addr.province}]]  [[${addr.city}]] [[${addr.region}]] [[${addr.detailAddress}]]  [[${addr.phone}]]</span>
    </div>
    <div class="hh1"/>
</div>
<!--********************************************************************************************-->
<!--谷粒学院自提-->
<!--<div class="top-4">-->
<!--    <p>谷粒学院自提</p>-->
<!--    <p>省运费·无续重·随时取</p>-->
<!--    <p class="xiang">详情</p>-->
<!--</div>-->

<!--地址-->
<div class="top-5">
    <p>北京昌平区</p><span>北京市 昌平区城区晨曦小区-16号楼 吉利大学 齐天大圣 150****2245</span><img src="img/09.png"/><span>距收货人0米</span>
    <p class="p3">距离最近</p><span class="xiu">修改自提点</span>
</div>
<div class="hh1"/>
</div>

<!--支付方式-->
<h4 class="h4">支付方式</h4>

<div class="top-6">
    <p>货到付款</p>
    <p><span>惠</span>在线支付</p>
</div>
<div class="hh1"></div>
<!--送货清单-->
<h4 class="h4" style="margin-top: 5px;">送货清单</h4>
<div class="top_1">
    <div class="to_right">
        <h5>商家：谷粒学院自营</h5>
        <div class="yun1" th:each="item:${confirmOrderData.items}">
            <img th:src="${item.image}" class="yun"/>
            <div class="mi">
                <p>[[${item.title}]]<span th:text="'￥' + ${#numbers.formatDecimal(item.price,3,2)}"> ￥ 499.00</span>
                    <span> [[${item.count}]] </span>
                    <span th:if="${confirmOrderData.stocks.get(item.skuId) == false}" style="color: red">无货</span>
                    <span th:if="${confirmOrderData.stocks.get(item.skuId) == true}">有货</span>
                </p>
                <p><span>1kg</span></p>
                <p class="tui-1">支持7天无理由退货</p>
            </div>
        </div>
        <p>退换无忧 <span class="money">￥ 0.00</span></p>
    </div>
</div>
<div class="bto"></div>
<div class="xia">
    <div class="qian">
        <p class="qian_y">
            <span>[[${confirmOrderData.count}]]</span>
            <span>件商品，总商品金额：</span>
            <span class="rmb">￥[[${#numbers.formatDecimal(confirmOrderData.total, 1, 2)}]]</span>
        </p>
    </div>
    <div class="yfze">
        <p class="yfze_a"><span class="z">应付总额：</span><span class="hq">￥<b id="payPrice">[[${#numbers.formatDecimal(confirmOrderData.payPrice, 1, 2)}]]</b></span>
        </p>
    </div>
    <form>
        <input id="addrInput" type="hidden" name="addrId"/>
        <input id="payPriceInput" type="hidden" name="payPrice" th:value="${confirmOrderData.payPrice}"/>
        <input id="orderTokenInput" name="orderToken" th:value="${confirmOrderData.orderToken}" type="hidden"/>
        <button class="tijiao" type="button" onclick="submitOrder()">提交订单</button>
    </form>
</div>

<div class="headera">
    <div class="Logo-tu">
        <span><img src="img/service_items_1.png"/></span>
        <span><img src="img/service_items_2.png"/></span>
        <span><img src="img/service_items_3.png"/></span>
        <span><img src="img/service_items_4.png"/></span>
    </div>
</div>
</body>
<script>
    function submitOrder() {
        const addrId = document.getElementById("addrInput").value;
        if (addrId == null || addrId === "") {
            alert("请选择收货人信息!");
            return false;
        }
        const payPrice = document.getElementById("payPriceInput").value;
        const orderToken = document.getElementById("orderTokenInput").value;
        let order = {
            addrId: addrId,
            payPrice: payPrice,
            orderToken: orderToken
        };

        if (payPrice <= 0) {
            alert("商品无货，请稍后再试!");
            return false;
        }

        $.ajax({
            type: 'POST',
            datatype: 'json',
            url: 'http://localhost:88/api/order/web/submitOrder',
            contentType: "application/json",
            data: JSON.stringify(order),
            success: function (data) {
                const orderSn = data.sn;
                if(data.sn!=null){
                    window.location.href = "http://localhost:88/api/order/pay/" + orderSn;
                }else{
                    alert(data.msg);
                }
            },
            error: function (data) {
                alert(data);
            }
        });
    }

    $(document).ready(function () {
        $('.header-right li:nth-of-type(6)').hover(function () {
            $('.header-r-11').css('display', 'block')
        }, function () {
            $('.header-r-11').css('display', 'none')
        })
        $('.header-right li:nth-of-type(12)').hover(function () {
            $('.header-r-2').css('display', 'block')
        }, function () {
            $('.header-r-2').css('display', 'none')
        })
        $('.header-right li:nth-of-type(14)').hover(function () {
            $('.header-r-3').css('display', 'block')
        }, function () {
            $('.header-r-3').css('display', 'none')
        })
        $('.header-l-2').hover(function () {
            $('.header-l-d').css('display', 'block')
        }, function () {
            $('.header-l-d').css('display', 'none')
        })
        $('.header-r-4').hover(function () {
            $('.h-r-1').css('display', 'block')
        }, function () {
            $('.h-r-1').css('display', 'none')
        })
    })

    function highlightAddress() {
        $(".addr-item p").css({"border": "2px solid gray"});
        $(".addr-item p[def='1']").css({"border": "2px solid red"});
    }

    $(".addr-item p").click(function () {
        $(".addr-item p").attr("def", "0");
        $(this).attr("def", "1");
        highlightAddress();

        //获取到当前地址id
        var addrId = $(this).attr("addrId");
        $("#addrInput").val(addrId);
    });
</script>

</html>